import React from 'react';
import styled from 'styled-components';

const LoadingTag = styled.div`
    width: 70px;
    height: 65px;
    @keyframes wx-page-loading {
        0% {
            -webkit-transform: scaley(1);
            transform: scaley(1);
        }
        50% {
            -webkit-transform: scaley(0.2);
            transform: scaley(0.2);
        }
        100% {
            -webkit-transform: scaley(1);
            transform: scaley(1);
        }
    }
    > div {
        width: 4px;
        height: 55px;
        border-radius: 4px;
        margin: 3px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        display: inline-block;
        -webkit-animation: wx-page-loading 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
        animation: wx-page-loading 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
    }
    > div:nth-child(1) {
        background-color: #ff0000;
    }
    > div:nth-child(2) {
        background-color: #ffb300;
    }
    > div:nth-child(3) {
        background-color: #7df902;
    }
    > div:nth-child(4) {
        background-color: #0269f9;
    }
    > div:nth-child(5) {
        background-color: #ed02f9;
    }
    > div:nth-child(1),
    > div:nth-child(5) {
        animation-delay: -0.2s !important;
    }

    > div:nth-child(2),
    > div:nth-child(4) {
        animation-delay: -0.4s !important;
    }
`;

const Loading = () => {
    return (
        <LoadingTag>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </LoadingTag>
    );
};

export default Loading;
